<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<html>
<head>
    <meta charset="utf-8">
    <title>SuperAfflatus后台管理系统</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="Layuimini/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="Layuimini/css/themes/default.css" media="all">
    <link rel="stylesheet" href="Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link type="text/css" href="superLoading/css/style1.css" rel="stylesheet" /> <!-- 超人loading-->
    <link rel="stylesheet" href="Pmd/css/liMarquee.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-layout-body layuimini-all">

<div class="layui-layout layui-layout-admin">

    <div class="layui-header header">
        <div class="layui-logo layuimini-logo"></div>

        <div class="layuimini-header-content">
            <a>
                <div class="layuimini-tool"><i title="展开" class="fa fa-outdent" data-side-fold="1"></i></div>
            </a>

            <!--电脑端头部菜单-->
            <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show">
            </ul>

            <!--手机端头部菜单-->
            <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>
                    <dl class="layui-nav-child layuimini-menu-header-mobile">
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">

             <!--   <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;">
                        <span id="weather0"></span>
                    </a>
                </li>
-->
                <li class="layui-nav-item" lay-unselect style="margin-right: 180px;width: 5px">
                    <a href="javascript:;" class="animate" id="pmd"></a>
                </li>

                <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;" id="musicNBt" ></a>
                    <!--  设置 class="animate" 文字开始滚动-->
                    <!--default.css-->
                </li>



                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" onclick="toBefore()">
                        <i id="tolast" class="fa fa-step-backward"></i></a>
                </li>


                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" onclick="isMusic()">
                        <i id="musBtn" class="fa fa-play"></i></a>
                </li>


                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" onclick="toNext()">
                        <i id="nextBtn" class="fa fa-step-forward"></i></a>
                </li>


                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" data-refresh="刷新" id="refBtn">
                        <i class="fa fa-refresh"></i></a>
                </li>


                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" id="clearBtn"><i class="fa fa-trash-o"></i></a>
                </li>

                <li class="layui-nav-item mobile layui-hide-xs" lay-unselect>
                    <a href="javascript:;" data-check-screen="full" id="fullBtn"><i class="fa fa-arrows-alt"></i></a>
                </li>


                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" th:onclick="weather()" id="weatherBtn">
                        <i class="fa fa-snowflake-o"></i></a>
                </li>

                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;"  id="calendarBtn">
                        <i class="fa fa-calendar"></i></a>
                </li>

                 <li class="layui-nav-item" lay-unselect>
                     <a href="javascript:;" th:onclick="calc()" id="calcBtn">
                         <i class="fa fa-calculator"></i></a>
                 </li>


                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" id="chaoBtn">
                        <i class="fa fa-qrcode"></i></a>
                </li>


                <!--              <li class="layui-nav-item" lay-unselect>
                                  <a href="javascript:;"  id="calendarId">
                                      <i class="fa fa-calendar"></i></a>
                              </li>
              -->

                <li class="layui-nav-item layuimini-setting">
                    <a href="javascript:;">
                        <!--<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"
                              id="userId"></span>-->
                        <span th:text="${username}"
                              id="userId"></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" layuimini-content-href="toUserInfoPage" data-title="基本资料"
                               data-icon="fa fa-gears">基本资料<span class="layui-badge-dot"></span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" layuimini-content-href="toUserPasswordPage" data-title="修改密码"
                               data-icon="fa fa-gears">修改密码</a>
                        </dd>
                        <dd>
                            <hr>
                        </dd>
                        <dd>
                            <a href="javascript:;" class="login-out">退出登录</a>
                        </dd>
                    </dl>
                </li>
                <!--miniTheme.js-->
                <li class="layui-nav-item layuimini-select-bgcolor" lay-unselect>
                   <!-- <a href="javascript:;" data-bgcolor="项目介绍"><i class="fa fa-ellipsis-v"></i></a>-->
                    <a href="javascript:;" id="superafltusBtn">
                        <i class="fa fa-exclamation"></i></a>
                </li>
            </ul>
        </div>
    </div>

    <!--无限极左侧菜单-->
    <div class="layui-side layui-bg-black layuimini-menu-left">
    </div>

    <!--初始化加载层-->
    <div class="layuimini-loader">
       <!-- <div class="layuimini-loader-inner"></div>-->
<div>
    <div class='body'>
  <span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </span>
        <div class='base'>
            <span></span>
            <div class='face'></div>
        </div>
    </div>
    <div class='longfazers'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <h1 class="info">正在飞速加载中...</h1>
</div>
    </div>


    <!--手机端遮罩层-->
    <div class="layuimini-make"></div>

    <!-- 移动导航 -->
    <div class="layuimini-site-mobile"><i class="layui-icon"></i></div>

    <div class="layui-body">

        <div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
            </ul>
            <div class="layui-tab-control">
                <li class="layuimini-tab-roll-left layui-icon layui-icon-left"></li>
                <li class="layuimini-tab-roll-right layui-icon layui-icon-right"></li>
                <li class="layui-tab-tool layui-icon layui-icon-down">
                    <ul class="layui-nav close-box">
                        <li class="layui-nav-item">
                            <a href="javascript:;"><span class="layui-nav-more"></span></a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;" layuimini-tab-close="current">关 闭 当 前</a></dd>
                                <dd><a href="javascript:;" layuimini-tab-close="other">关 闭 其 他</a></dd>
                                <dd><a href="javascript:;" layuimini-tab-close="all">关 闭 全 部</a></dd>
                            </dl>
                        </li>
                    </ul>
                </li>
            </div>
            <div class="layui-tab-content">
                <div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div>
            </div>
        </div>
    </div>
</div>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="Layuimini/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="timeJs/calendar.js"></script>
<script src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<!--<script src="Pmd/js/jquery.liMarquee.js"></script>  -->
<!--<script src="weather/jquery.leoweather.all.js"></script>-->

<script>
  //  document.body.style.zoom="90%"
   /* $('#weather0').leoweather({appid:'86986721',appsecret:'eXm5G85Y',city:'武汉'});*/

    // document.body.style.zoom="90%"
    layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniAdmin = layui.miniAdmin,
            miniTongji = layui.miniTongji;



        //获取到用户名
        var username = $("#userId").html();

        var options = {
            iniUrl: "initNew",    // 初始化接口
            // clearUrl: "clearWeb", // 缓存清理接口
            urlHashLocation: true,      // 是否打开hash定位
            bgColorDefault: false,      // 主题默认配置
            multiModule: true,          // 是否开启多模块
            menuChildOpen: false,       // 是否默认展开菜单
            loadingTime: 0,             // 初始化加载时间
            pageAnim: true,             // iframe窗口动画
            maxTabNum: 20,              // 最大的tab打开数量
        };
        miniAdmin.render(options);

        // 百度统计代码，只统计指定域名
        miniTongji.render({
            specific: true,
            domains: [
                '99php.cn',
                'layuimini.99php.cn',
                'layuimini-onepage.99php.cn',
            ],
        });

        $('.login-out').on("click", function () {

            layer.confirm('你确定要退出用户【' + username + '】吗？', {btn: ['确定', '取消'], title: "退出提示"}, function (index) {
                layer.msg('用户退出中...', {icon: 16, shade: 0.3, time: 2800}, function () {
                    window.location = '/logout';   //security注销用户
                });
                layer.close(index);
            });
        });
    });
</script>
<script type="text/javascript">

 /* 引入以下设置即可实现跑马灯效果
     //"css/liMarquee.css"
    //"js/jquery.liMarquee.js"
    $('.pmd').liMarquee({
        drag: false
    });*/



    function calc() {
        //window.location ='opencalc';
       /* $.ajax({
            url: "opencalc",
            type: "GET",
            success: function () {
            }
        });*/
        //打开计算器

        layer.open({
            type: 2,
            title: '计算器',
            shadeClose: false,
            shade: 0.8,
            area: ['315px', '495px'], //宽高
            //area: ['900px', '90%'],
            content: "calc/calc.html"
        });


    }


 $("#calendarBtn").click(function () {
     layer.open({
         type: 2,
         title: '日历预览',
         shadeClose: false,
         shade: 0.8,
         area: ['675px', '405px'], //宽高
         //area: ['900px', '90%'],
         content: "timeJs/calendar.html"
     });


 })




    var tips;
    $("#calcBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>计算器</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });

 $("#calendarBtn").on({
     mouseenter: function () {
         var that = this;
         tips = layer.tips("<span style='color: #000;'>日历</span>",
             that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
     },
     mouseleave: function () {
         layer.close(tips);
     }
 });


 $("#weatherBtn").on({
     mouseenter: function () {
         var that = this;
         tips = layer.tips("<span style='color: #000;'>天气预览</span>",
             that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
     },
     mouseleave: function () {
         layer.close(tips);
     }
 });


    $("#fullBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>全屏显示</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });

    $("#refBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>刷新</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });


    $("#clearBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>清理缓存</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });


    $("#clearBtn").click(function () {

        layer.confirm('您确定清理菜单缓存吗?', {btn: ['确定', '取消'], title: "提示"}, function (index) {
            $.ajax({
                url: "clearMenu",    //clearWeb   这个是清理所有缓存
                type: "GET",
                success: function () {
                    layer.msg("redis缓存清理完成!")
                }
            });
            layer.close(index);
            window.location.reload();
        });

    })


 function weather(){
     layer.open({
         type: 2,
         title: '天气预览',
         shadeClose: false,
         shade: 0.8,
         area: ['395px', '565px'], //宽高
         //area: ['900px', '90%'],
         content: "weather/index.html"
     });
 }




 $("#superafltusBtn").click(function () {

     layer.confirm('确定要查看项目介绍吗?', {btn: ['确定', '取消'], title: "提示"}, function (index) {
         //window.open("beautiful/superaflatus.html") ;
         window.open("beautiful/superaflatus.html" ,'_blank', "height="+(screen.availHeight - 30)+",width="+(screen.availWidth - 5)+", top=0, left=0,toolbar=no, menubar=no, scrollbars=no, location=no, status=no");
         layer.close(index);
         window.location.reload();
     });

 })



 $("#superafltusBtn").on({
     mouseenter: function () {
         var that = this;
         tips = layer.tips("<span style='color: #000;'>项目介绍</span>",
             that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
     },
     mouseleave: function () {
         layer.close(tips);
     }
 });



 $("#chaoBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>关于作者</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });


    $("#chaoBtn").click(function () {
        var url = "DownloadFile/myWatch.png";
        var index = layer.open({
            //type:1 表示页面层
            type: 1,
            title: '微信二维码',
            //是否点击遮罩关闭
            shadeClose: true,
            //样式类名，可以自定义弹窗样式
            skin: 'demo_share',
            //弹层外区域
            shade: 0.3,
            maxmin: false, //开启最大化最小化按钮
            //宽高
            area: ['315px', '408px'],
            //内容
            content: "<img src='" + url + "' alt=''>",
            //弹窗下方的按钮
            btn: ['<i class="layui-icon" style="margin-right: 10px;"></i>下载二维码', '确定'],
            //绑定第一个按钮的点击事件
            btn1: function (index) {
                //下载图片到本地
                var a = document.createElement('a');
                var event = new MouseEvent('click');
                a.download = "微信二维码";
                a.href = url;
                a.dispatchEvent(event);
            }
        });

    })

</script>
<div>

    <tr th:each="music,stat:${musicList}"><!--循环userList,以person作为形参-->
        <!--        hidden="true"-->
        <audio class="audios" hidden="true" controls="controls" loop="loop" onended="tonext">
            <source th:src="${music.musicUrl}"/>
        </audio>
    </tr>

</div>
<script th:inline="javascript">
    var musicInfo = [[${musicList}]];
    //console.log(musicInfo);
    var musices =new Array();
    for (var i=0;i<musicInfo.length;i++){
        musices.push(musicInfo[i].musicName);
    }
    var audios = document.getElementsByClassName("audios");
    // console.log(audios);
    var flag = true;
    var index = 0;
    var num_song = audios.length;


    function isMusic() {
        if (flag) {
             $("#musBtn").removeClass("fa fa-pause").addClass("fa fa fa-music");
            // console.log(audios[index%num_song]);
            audios[index % num_song].play();
            layer.msg("播放歌曲: "+musices[index % num_song])
            //$("#musicNBt").html(musices[index % num_song]);
             $("#pmd").html(musices[index % num_song]);
            flag = false;
        } else {
             $("#musBtn").removeClass("fa fa fa-music").addClass("fa fa-pause");
            audios[index % num_song].pause();
            layer.msg("暂停播放")
           // $("#musicNBt").html("暂停播放");
            //$("#musicNBt").html("");
            $("#pmd").html("");
            flag = true;
        }
    }
    function toBefore() {
        if (index == 0) {
            layer.msg("已经是第一首了")
            audios[0].play();
           // $("#musicNBt").html(musices[0]);
            $("#pmd").html(musices[0]);
        } else {
            audios[index % num_song].load();
            audios[index % num_song].pause();
            index--;
            layer.msg("播放歌曲: "+musices[index % num_song])
            //$("#musicNBt").html(musices[index % num_song]);
            $("#pmd").html(musices[index % num_song]);
            audios[index % num_song].play();
        }

    }
    function toNext() {
        // console.log(index%num_song)
        audios[index % num_song].load();
        audios[index % num_song].pause();
        index++;
        layer.msg("播放歌曲: "+musices[index % num_song])
        //$("#musicNBt").html(musices[index % num_song]);
        $("#pmd").html(musices[index % num_song]);
        audios[index % num_song].play();
    }

    $("#musBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>播放音乐</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });

    $("#tolast").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>上一首</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });

    $("#nextBtn").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>下一首</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });
</script>
</body>
</html>
